<!-- CONTENT -->
<div id="tools-columns">
  <!-- ------------------- LEFT COLUMN -------------------------------- -->
  <div id="tools-columns-left">
    <div id="tools-menu-sticky-div">
      <div class="tools-menu-buttons">
        <button id="tool-ep-back-button" class="tools-button-accent">
          <i class="fas fa-angle-left"></i>
          <span id="tool-ep-back-button-text"></span>
        </button>
        <button id="tool-ep-start-button">
          <span id="tool-ep-start-button-text"></span>
        </button>
      </div>
      <div class="tools-menu-sections">
        <!-- sections menu -->
        <div
          id="tool-ep-section-general-options-button"
          class="tools-menu-button tools-menu-button-selected"
        >
          <i class="fas fa-exchange-alt tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-ep-section-general-options-text"></span>
          </div>
        </div>
        <div
          id="tool-ep-section-advanced-options-button"
          class="tools-menu-button"
        >
          <i class="fas fa-tools tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-ep-section-advanced-options-text"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ------------------- RIGTH COLUMN -------------------------------- -->
  <div id="tools-columns-right">
    <div id="tools-title"><span id="tool-ep-title-text"></span></div>
    <!-- input -->
    <div
      id="tool-ep-input-options-section-div"
      class="tools-columns-right-section"
    >
      <div class="tool-shared-columns-parent">
        <div class="tool-shared-columns-50">
          <h3><span id="tool-ep-input-file-text"></span></h3>
          <div class="tools-columns-right-subsection">
            <div id="tool-shared-image-container">
              <img
                id="tool-ep-image"
                src="../assets/images/tests/test_palette.jpg"
              />
            </div>
            <button id="tool-ep-add-file-button">
              <span id="tool-ep-add-file-button-text"></span>
            </button>
          </div>
        </div>
        <div class="tool-shared-columns-50">
          <h3><span id="tool-ep-output-palette-text"></span></h3>
          <div class="tools-columns-right-subsection">
            <div id="tool-ep-palette"></div>
            <button id="tool-ep-export-to-file-button">
              <span id="tool-ep-export-to-file-button-text"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- advanced options -->
    <div
      id="tool-ep-advanced-output-options-section-div"
      class="tools-columns-right-section set-display-none"
    >
      <h3><span id="tool-ep-advanced-output-options-text"></span></h3>
      <div class="tools-columns-right-subsection">
        <label>
          <span id="tool-ep-export-format-text"></span>
          <select id="tool-ep-export-format-select" class="browser-default">
            <option value="gpl" selected>.gpl</option>
            <option value="aco">.aco</option>
          </select>
        </label>
        <label>
          <span id="tool-ep-max-num-colors-text"></span>
          <select id="tool-ep-max-num-colors-select" class="browser-default">
            <option value="16" selected>16</option>
            <option value="32">32</option>
          </select>
        </label>
        <label>
          <span id="tool-ep-distance-method-text"></span>
          <select id="tool-ep-distance-method-select" class="browser-default">
            <option value="euclidean" selected>Euclidean</option>
            <option value="deltae">Delta E</option>
          </select>
        </label>
        <label>
          <span id="tool-ep-distance-deltae-threshold-text"></span>
          <input id="tool-ep-deltae-threshold-input" type="text" value="2" />
        </label>
      </div>
    </div>
  </div>
</div>
